<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>食货志</title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- BS4依赖 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.4.0.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- json依赖 -->
    <script src="js/json2.js"></script>
    <script>
        // 全局变量用来提交后进行检查，未填充的为false
        var flag = [false, false, false];
        // 表单数据
        var pass1, pass2, user;
        var formJson = {};

        // TODO 跳转
        function jumurl() {
            window.location.href = "main.html";
        }
        // 获取用户信息
        function getUserInfo() {
            // 获取用户信息
            $.ajax({
                url: "homePage",
                type: "post",
                dataType: "json",
                success: function (user) {
                    if (user != null) {
                        if (user.name != "") {
                            $("#userInfo").html("欢迎您，亲爱的" + user.name);
                        } else {
                            $("#userInfo").html("欢迎您，亲爱的" + user.account);
                        }
                        $("#exitSpan")[0].innerHTML = "注销";
                        // $("#exitSpan").show();
                        $("#registerNav").hide();
                        $("#loginNav").hide();
                    }
                },
                error: function () {
                    alert("服务器错误，正在抢修中~");
                }
            });
        }
        // 默认情况下调用
        getUserInfo();
    </script>
    <script>

        // 注册校验、登录处理等……
        $(function () {
            // 检查用户名是否重复
            $("#user").blur(function () {
                user = $("#user").val();
                if (user != "") {
                    if (user.length < 6) {
                        $("#s1").attr("class", "text-warning");
                        $("#s1")[0].innerHTML = "账号不得小于6位";
                    } else {
                        // 启动ajax
                        $.ajax({
                            url: "accountCheck",
                            type: "post",
                            data: {account: user},
                            success: function (data) {
                                if (data == "ok") {
                                    $("#s1").attr("class", "text-success");
                                    $("#s1")[0].innerHTML = "用户名可用!!";
                                    flag[0] = true;
                                    formJson.account = user;
                                } else {
                                    $("#s1").attr("class", "text-danger");
                                    $("#s1")[0].innerHTML = "用户名不可用!!";
                                    flag[0] = false;
                                }
                            },
                            error: function () {
                                alert("系统错误! 用户注册失败");
                            }
                        });
                    }
                }
            });

            // 检查密码
            $("#pass1").blur(function () {
                pass1 = $("#pass1").val();
                if (pass1.length < 6) {
                    $("#s2").attr("class", "text-danger")
                    $("#s2")[0].innerHTML = "密码少于6位";
                    flag[1] = false;
                } else {
                    flag[1] = true;
                    $("#s2").attr("class", "text-success")
                    $("#s2")[0].innerHTML = "密码可用";
                }
            });
            $("#pass2").blur(function () {
                pass2 = $("#pass2").val();
                if (pass1 == pass2) {
                    $("#s3").attr("class", "text-success");
                    $("#s3")[0].innerHTML = "确认密码正确";
                    flag[2] = true;
                    formJson.pass = pass2;
                } else {
                    $("#s3").attr("class", "text-danger");
                    $("#s3")[0].innerHTML = "密码不一致";
                    flag[2] = false;
                }
            });

            // 发送注册请求
            $("#register").click(function (e) {
                if (flag[0] == false || flag[1] == false || flag[2] == false) {
                    alert("注册表不完整！！");
                } else {
                    // 与服务器交换数据，将js对象通过API转为字符串
                    var userData = JSON.stringify(formJson);
                    $.ajax({
                        url: "registry",
                        type: "post",
                        data: {user: userData},
                        success: function (data) {
                            if (data == "ok") {
                                // 使用模态框提示
                                $("#registerSuccess").modal("show");
                                // setTimeout(jumurl, 3000);
                            } else {
                                alert("注册失败，请稍后再试……");
                            }
                        },
                        error: function () {
                            alert("系统异常！注册失败");
                        }
                    })
                }
            });

            // 用户登录处理
            $("#login").click(function (e) {
                var account = $("#loginAccount").val();
                var secret = $("#loginPass").val();
                if (account.length > 0 && secret.length > 0) {
                    $.ajax({
                        url: "loginCheck",
                        type: "post",
                        data: {"account": account, "secret": secret},
                        success: function (data) {
                            if (data == "ok") {
                                alert("登录成功！即将返回主页~");
                                setTimeout(jumurl, 1200);
                            } else {
                                alert("用户名或密码错误，请重新登录！");
                            }
                        },
                        error: function () {
                            alert("系统错误！登录失败");
                        }
                    });
                }
                // 清空表单
                $("#loginForm").trigger("reset");
            });

        });

        // 用户注销操作
        function userExit() {
            alert("成功退出系统");
            $("#userInfo").hide();
            $("#exitSpan").hide();
            $("#registerNav").show();
            $("#loginNav").show();
            // 发送请求注销用户会话
            $.post("exitAjax");
            // 注销回跳转到主页面
            setTimeout(jumurl, 1000);
        }
    </script>
</head>
<body>

<!-- 顶部固定导航栏 -->
<div class="container-full">

    <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
        <a class="navbar-brand" href="main.html">食货志</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="main.html">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">美食</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">餐馆</a>
                </li>
            </ul>
        </div>
        <a id="registerNav" class="nav-link text-light" data-toggle="modal" data-target="#registerModal" style="font-size: 16px; alignment: right">注册</a>
        <a id="loginNav" class="nav-link text-light" data-toggle="modal" data-target="#loginModal" style="font-size: 16px; alignment: right">登录</a>
        <!-- 显示用户和注销“按钮” -->
        <span id="userInfo" class="nav-link text-light" onclick="window.location.href='center.html';"></span>
        <span id="exitSpan" class="nav-link text-light" onclick="userExit();"></span>
    </nav>
    <!-- 注册模态框 -->
    <div class="modal fade" id="registerModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="" method="post">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">申请注册食货志会员</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="user">账号：</label>
                            <input type="text" id="user" class="form-control" placeholder="推荐使用电话号码，作为登录账号~~" maxlength="11">
                            <span id="s1"></span>
                        </div>
                        <div class="form-group">
                            <label for="pass1">密码：</label>
                            <input type="password" id="pass1" class="form-control" placeholder="请输入密码">
                            <span id="s2"></span>
                        </div>
                        <div class="form-group">
                            <label for="pass2">确认密码：</label>
                            <input type="password" id="pass2" class="form-control" placeholder="请确认密码">
                            <span id="s3"></span>
                        </div>
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button id="register" type="submit" class="btn btn-primary" data-dismiss="modal">注册</button>
                        <button type="reset" class="btn btn-secondary">重置</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 注册成功提示 -->
    <div class="modal fade" id="registerSuccess">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">Tips</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    恭喜您注册成功，页面即将跳转……
                </div>
                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 登录模态框 -->
    <div class="modal fade" id="loginModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="loginForm" action="" method="post">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">请登录</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="loginAccount">账号：</label>
                            <input type="text" id="loginAccount" class="form-control" placeholder="请输入登录账号">
                        </div>
                        <div class="form-group">
                            <label for="loginPass">密码：</label>
                            <input type="password" id="loginPass" class="form-control" placeholder="请输入用户密码">
                        </div>
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button id="login" type="button" class="btn btn-primary" data-dismiss="modal">登录</button>
                        <button type="reset" class="btn btn-secondary">重置</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>

</body>
</html>